vendors = official
@font-face {
  font-family: 'iconfont';  /* project id 1074841 */
  src: url('//at.alicdn.com/t/font_1074841_m04x4m22rzp.eot');
  src: url('//at.alicdn.com/t/font_1074841_m04x4m22rzp.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1074841_m04x4m22rzp.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1074841_m04x4m22rzp.woff') format('woff'),
  url('//at.alicdn.com/t/font_1074841_m04x4m22rzp.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1074841_m04x4m22rzp.svg#iconfont') format('svg');
}

$color-default = #666     //默认色
$color-active = #333      //选中色
$color-grey = #999     //失效色
$color-bg = #2567FF     //背景色
$color-bg-2 = #f4f4f4     //背景色
$color-primary = #4b9afc     //主要色
$color-minor = #ff5552     //主要色2
$color-border = #e5e5e5     //边线色
$color-border-3 = #4b9afc     //边线色

$bgColor = #fff
$profileSize = 40rpx
$profileColor = #333
$profileHei = 104rpx

$inputSize = 28rpx
$labelMr = 24rpx
$labelFw = bold
$inputColor = #333333

$inputHeight = 3.34rem
$labelHeight = 3.34rem
$labelColor = #333
$labelMinwidth = 112rpx

$borderColor = #e3e3e3
$inputPadding = 18rpx 0
$isShowInputTitle = true
$placeholderColor = #ccc
$lastBorder = true
/**
  自定义radio checkbox
*/
$rcSize = 36rpx
$rcColor = #e3e3e3
$rcCheckedColor = #4b9afc
$rcMr = 40rpx
$rcInputMr = 10rpx
$radio = '\e76a'
$radioChecked = '\e624'
$checkbox = '\e70b'
$checkboxChecked = '\e70c'

ss-display-flex($flex-flow = row nowrap, $justify-content = flex-start, $align-items = false, $align-content = false)
  display: flex
  flex-flow: $flex-flow
  justify-content: $justify-content
  if ( $align-items != false)
    align-items: $align-items
  if ( $align-content != false)
    align-content: $align-content

  

//小圆点
.icon-dot
  background: red
  background:#f00;
  color:#fff;
  font-size: 10px;
  width 20rpx
  height @width
  border-radius @width
  ss-display-flex(row nowrap, center, center, center)

.icon-dot-small
  @extends .icon-dot
  width 16rpx
  height @width
  border-radius @width

//iconfont
.form-arrows
  &:after
    content: '▲'
    // content: '\e6b0'
    color: #999
    font-size: 22rpx
    margin-left: 10rpx

.form-arrows-x
  &:after
    content: '▼'
    // content: '\e794'
    color: $color-primary
    font-size: 22rpx
    margin-left: 10rpx

.form-close-eye
  &:before
    content: '\e65e'
    color: $color-primary
    font-size: 15rpx
    margin-left: 10rpx

.form-eye
  &:before
    content: '\e65d'
    color: #999
    font-size: 15rpx
    margin-left: 10rpx
    
.icon-arrows-r
  &:after
    content: '\e618'
    color: $arrow-default-color

.icon-arrows-t
  &:before
    content: '\e617'
.icon-arrows-b
  &:before
    content: '\e616'

.icon-silence
  &:before
    content: '\e74d'

.icon-eye
  &:before
    content: '\e65d'
.icon-close-eye
  &:before
    content: '\e65e'
.icon-right
  &:before
    content: '\e660'



$inputBC = $placeholderColor

.input-container
  width 96%
  margin 0 auto

//小程序自带bug 指定的类(.phcolor)目前不能起作用，需要用它的默认值.input-placeholder
.input-placeholder      
  color: $placeholderColor
  font-size: $inputSize
input 
  height: $inputHeight
  min-height: @height
  padding 0 10px

//input title
.input-profile-item-title
  color: $profileColor
  font-size: $profileSize
  height: $profileHei
  line-height: @height
  &.item-bb
    border-bottom: 1px solid $borderColor

.input-item
  display block
  .profile-item
    &-title
      @extends .input-profile-item-title
      @extends .input-profile-item-title.item-bb
    &-desc
      font-size 30rpx
      color #999
    &-required
      font-size 30rpx  
  .streamAims
    display flex
    font-size: 22rpx
    .streamAims-item
      margin-right 30rpx

.input-item-content
  ss-display-flex(row nowrap, flex-start)
  position relative
  font-size $inputSize
  padding: $inputPadding
  border-bottom: 1px solid $inputBC
  background: $bgColor
  &.noborder
    border-bottom: none
  if ($lastBorder)
    &:last-child
      border-bottom: none
  .input-item
    // &-switch
    //   width: 82rpx !important
    &-desc
      font-size 24rpx
      padding-left 10px
      color #999
    &-error
      font-size 24rpx
      padding-left 10px
      margin-top 20rpx
      color red
    &-area
      color: $inputColor
    &-input
      color: $inputColor
    &-picker 
      view
        flex: 1
    &-passwd-eye
      width 100%
      display flex
      align-items: center
    &-label
      position relative
      flex: 1
      display flex
      flex-direction column
      &.input-type-dropdown
        .input-item-passwd-eye
          view.item-input-dropdown
            margin 15px 10px
          .input-item
            &-dropdown
              font-size 28rpx
            &-dropdown-options
              width calc(100% - 80rpx)
              min-height 100px
              max-height 100px
              background-color #ffffff
              border 1px solid #e3e3e3
              color: #666
              line-height 80rpx
              position absolute
              left 10px
              top calc(100% - 10px)
              max-height: 200px;
              height 200px
              overflow auto
              &-item
                padding 0 20rpx
                &.active
                  background-color #2585cf
                  // background-color blue
                  color #fff
                &.disabled
                  background-color #ccc
                  color #fff



    if ($isShowInputTitle)
      &-title
        min-width $labelMinwidth
        color: $labelColor
        font-weight: $labelFw
        height: $labelHeight
        line-height: @height
        // margin-right: $labelMr
      // &-required
      //   font-size 30rpx

    &-rc-group
      ss-display-flex(row wrap, flex-start)
      .input-item
        &-rc
          font-size $inputSize
          position relative
          margin-right $rcMr
          display flex
        &-checkbox, &-radio
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity 0
          z-index 2
        &-checkbox-after, &-radio-after
          margin-right: $rcInputMr
          order: -1
          &:before
            color: #e3e3e3
            font-size: $rcSize
          &.checked
            &:before
              color: #4b9afc
        &-checkbox-after
          &:before
            content: $checkbox
          &.checked
            &:before
              content: $checkboxChecked
        &-radio-after
          &:before
            content: $radio
          &.checked
            &:before
              content: $radioChecked

/*原生swtich样式调整-start*/
/*swtich整体大小*/
.wx-switch-input
  height: 62rpx !important
  &:before
    height: 58rpx !important
  &:after
    height: 58rpx !important


.switch-sm
  .wx-switch-input
    zoom: .8

// ===============  



$inputHeight = 2.34rem
$inputLHeight = 3.34rem

.dingwei
  &:after
    content: '♚'
    font-size 32px

.star
  &:after
    content: '★'
    font-size 32px


.dd-demo
  border 10px solid red
  box-sizing border-box
  padding: 10px
  .input-item-area
    border-bottom 1px solid #eee
    margin-bottom 10px

// .switcher, .picker, .pickers
//   .input-item-content
//     .input-item-label
//       height: $inputHeight
//       line-height: $inputLHeight

// .ckboxer, .rdboxer
//   .input-item-content
//     .input-item-label
//       display flex
//       flex-direction column
//       justify-content: center


// .input-item-content
//   view.item-input-dropdown
//     width: 100%;
//     height: $inputHeight
//     line-height: $inputLHeight
//     // padding: 0 10px;
    
//   .input-item-rc-group 
//     .input-item-rc
//       margin-right 10px

//   .input-type-rating
//     display flex
//     align-items: center
//   .input-item
//     .profile-item
//     &-rating
//       color red
//       margin-right 10px
//       &:after
//         content: '☆'
//         font-size 28px
//       &.active
//         &:after
//           content: '★'
//     &-title
//       margin-bottom 10px
//       height: $inputHeight
//       line-height: $inputLHeight
//     &-label
//       font-family "iconfont" !important
//       padding-left 20px
//     &-dropdown-masker
//       position: fixed; 
//       left: 0; 
//       top: 0; 
//       width: 100%; 
//       height: 100%; 
//       box-sizing: border-box; 
//       // border: 3px solid red

// .icon-dot, .icon-arrows-r, .icon-arrows-t, .icon-arrows-b, .icon-silence,.icon-close-eye, .icon-right
//   // font-family "iconfont" !important
//   &:after
//     font-size 16px
//   &:before
//     font-size 16px

// .form-close-eye, .form-eye
//   &:before
//     font-size 18px